<template>
  <div class="p-4">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :model="listQuery" inline>
          <el-form-item label="移除条件(投入金额):">
            <el-input
              class="w-50"
              v-model.number="listQuery.config_value"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" size="small" @click="deBounceWrap(handleSumbit)">提交</el-button>
          </el-form-item>
          <br>
          <el-form-item>
            <el-input
              type="text"
              class="w-80"
              v-model="listQuery.keyword"
              placeholder="请输入用户编号"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="success"
              size="small"
              icon="el-icon-search"
              @click="deBounceWrap(handleSearch)"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <div class="flex items-center mb-3">
          <el-button
            @click="handleChange(7)"
            class="mr-3 cursor-pointer"
            style="background:#cc9933;color:#fff"
            plain
            >铜盲盒</el-button
          >
          <el-button
            @click="handleChange(8)"
            class="mr-3 cursor-pointer"
           style="background:#C0C0C0;color:#fff"
            plain
            >银盲盒</el-button
          >
          <el-button
            @click="handleChange(9)"
            class="mr-3 cursor-pointer"
          style="background:#FFD700;color:#fff"
            plain
            >金盲盒</el-button
          >
        </div>
      </div>
      <el-table :data="individualData" border>
        <el-table-column prop="user_id" label="用户ID"></el-table-column>
        <el-table-column prop="user_code" label="用户编号"></el-table-column>
        <el-table-column prop="nickname" label="用户昵称"></el-table-column>
        <el-table-column prop="head_picture" label="头像">
          <template slot-scope="scope">
            <el-popover placement="right" width="220" trigger="hover">
              <img
                :src="scope.row.head_picture"
                alt=""
                style="max-width: 200px; max-height: 200px"
              />
              <img
                slot="reference"
                :src="scope.row.head_picture"
                alt=""
                style="width: 100px; height: 100px"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="set_value" label="移除投入"></el-table-column>
        <el-table-column prop="inject" label="当前投入"></el-table-column>
        <el-table-column prop="earnings" label="当前收益"></el-table-column>
      </el-table>
      <cus-pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.per_page"
        @pagination="getUserList"
      />
    </el-card>
  </div>
</template>
<script>
import { noviceUsers } from "@/api/blindBox/noviceUsers";
export default {
  name: "noviceUsers",
  data() {
    return {
      /*盲盒类型：7：铜；8：银；9：金*/
      box_type: 7,
      listQuery: {
        keyword: undefined,
        page: 1,
        per_page: 20,
        config_value: null,
      },
      total: 0,
      individualData: [],
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    handleSearch() {
      this.getUserList();
    },
    getUserList() {
      let data = {
        box_type: this.box_type,
        keyword: this.listQuery.keyword,
        page: this.listQuery.page,
        per_page: this.listQuery.per_page,
        config_value: this.listQuery.config_value,
      };
      noviceUsers(data).then((res) => {
        this.individualData = res.data.list.data;
        this.total = res.data.list.total;
        this.listQuery.config_value = res.data.config_value
      });
    },
    handleChange(type) {
      this.box_type = type;
      this.getUserList();
    },
    handleSumbit(){
      this.getUserList();
    }
  },
};
</script>

<style scoped>
</style>
